$(function(){
    //加载页头
	$("#header").load("/views/header.html",function(){
		$(".headerRight").find("li:first-child").addClass("active");
		//显示时间
        updateTime();
	});
	var num = 0


    //色标等变量
	var colorCode=["#A9FFFD","#2DD4FD","#2DA7FF","#2D7EFF","#51A82D","#4AFF2D","#FFFD2D","#FFD12F",
				"#FFA82D","#FF2D2D","#CD2F30","#AA2D2D","#AC2DAC","#DA2DDE","#F02DFF"];
	var cThree=["0.1","2","5","10","15","25","30","40","50","60","70","80","90","100","110"];
	var cCNTwelve=["0.1","2","5","10","15","25","30","40","50","60","80","100","120","140","150"];
	var cCTwentyfour=["0.1","2","5","10","15","25","35","50","70","100","120","150","170","200","230","250"];



	//1小时降雨
	function oneRain(){
		var time=oneTime();
		console.log(time);
		v.pubTimeDisplay.val(time);
		var hour=time.slice(11,13);
		time=time.replace(/\//g,"").replace(" ","").replace(/:/g,"")+"00";
		console.log(time);

		var productcategory={
			title:"shengtai",
			type:"apcpsfc",
			nav:"NAFP_FOR_FTM_ST24H_ZJ",
			userid:"小时降水预报",
			num:"1",
			timetype:"H",
			year:time,
			hour:"1"
		};
		grid_controller(productcategory);
		addColorCode('1小时降水预报',colorCode,cThree);
		var ajaxUrl='http://10.135.30.116:8080/ZJDataCenter/api/'+productcategory.nav+'/getContourEleValidtimeListByTime'
				+'?userid=zjwlzx&pwd=123&productcategory='+productcategory.type+'&fcstlevel=0'
				+'&time='+time+'&timetype='+productcategory.timetype+'&'
				+'admincodes=330000&elements=time,hours&limitcnt=100&dataformat=json';
		$.ajax({
			url:ajaxUrl,
			type:"get",
			success:function(data){
				console.log(data);
				if(data.DS.join("")){
					$(".warning").addClass("displayNone")
					drawAxisOne(parseInt(hour),1,data.DS);
					removeAxis(productcategory);

				}else{
					$(".warning").removeClass("displayNone")
				}
				
			}
		})
	}
	oneRain();

	//3小时降雨函数
	function threeRain(nowdate){
		var time =threeTime(nowdate);
		console.log(time);
		v.pubTimeDisplay.val(time);
		var hour=time.slice(11,13);
		var day=time.slice(8,10);
		time=time.replace(/\//g,"");
		var t1=(parseInt(hour)==20)?'12':"00";
		time=time.slice(0,8)+t1+'0000';
		console.log(t1,time);
		var productcategory={
			title:"OCF",
			type:"pr03",
			urls:"10.135.30.116:8080",
			nav:"NAFP_FOR_FTM_OCF_ZJ",
			userid:"3小时降水预报",
			num:"3",
			timetype:"H",
			year:time,
			hour:"3"
		};
		grid_controller(productcategory);
		var ajaxUrl='http://10.135.30.116:8080/ZJDataCenter/api/'+productcategory.nav+'/getContourEleValidtimeListByTime'
			+'?userid=zjwlzx&pwd=123&productcategory='+productcategory.type+'&fcstlevel=0'
			+'&time='+time+'&timetype='+productcategory.timetype+'&'
			+'admincodes=330000&elements=time,hours&limitcnt=100&dataformat=json';
		addColorCode('3小时降水预报',colorCode,cThree);
		
		$.ajax({
			url:ajaxUrl,
			type:"get",
			success:function(data){
				if(data.DS.join("")){
					num = 0
					$(".warning").addClass("displayNone");
					drawAxisThree(parseInt(hour),3,day,5,2,data.DS);
					removeAxis(productcategory);
					console.log(data)
				}else{
          num  = num+3

          if(num<100)
            threeRain(setHour(num))
          else{
            $(".warning").removeClass("displayNone")
            num = 0
          }


				}
			}
		})
	}

	function setHour(hour) {

		var date = new Date()
				date.setHours(date.getHours()-hour)

		return date
  }

	//6小时降雨函数
	function sixRain(nowdate){
		var time =threeTime(nowdate);
		v.pubTimeDisplay.val(time);
		var hour=time.slice(11,13);
		var day=time.slice(8,10);
		time=time.replace(/\//g,"");
		var t1=(parseInt(hour)==20)?'12':"00";
		time=time.slice(0,8)+t1+'0000';
		console.log(time)
		var productcategory={
			title:"OCF",
			type:"pr06",
			urls:"10.135.30.116:8080",
			nav:"NAFP_FOR_FTM_OCF_ZJ",
			userid:"6小时降水预报",
			num:"6",
			timetype:"H",
			hour:"6",
			year:time,
		};

		grid_controller(productcategory);
		var ajaxUrl='http://10.135.30.116:8080/ZJDataCenter/api/'+productcategory.nav+'/getContourEleValidtimeListByTime'
			+'?userid=zjwlzx&pwd=123&productcategory='+productcategory.type+'&fcstlevel=0'
			+'&time='+time+'&timetype='+productcategory.timetype+'&'
			+'admincodes=330000&elements=time,hours&limitcnt=100&dataformat=json';

		addColorCode('6小时降水预报',colorCode,cThree);
		$.ajax({
			url:ajaxUrl,
			type:"get",
			success:function(data){
				console.log(data)
				if(data.returnCode==0){
					num = 0
					$(".warning").addClass("displayNone");
					drawAxisSix(parseInt(hour),6,day,8,2,data.DS);
					removeAxis(productcategory);

				}else{
					num  = num+6

					if(num<100)
            sixRain(setHour(num))
					else{
            $(".warning").removeClass("displayNone")
						num = 0
					}

				}
				
				
			}
		})
	}

	//12小时降雨函数
	function twelveRain(nowdate){
		var time =threeTime(nowdate);
		v.pubTimeDisplay.val(time);
		var hour=time.slice(11,13);
		var day=time.slice(8,10);
			time=time.replace(/\//g,"");
			var t1=(parseInt(hour)==20)?'12':"00";
				time=time.slice(0,8)+t1+'0000'
		var productcategory={
				title:"OCF",
				type:"pr12",
				urls:"10.135.30.116:8080",
				nav:"NAFP_FOR_FTM_OCF_ZJ",
				userid:"12小时降水预报",
				num:"12",
				timetype:"H",
				year:time,
				hour:"12"
			};
			grid_controller(productcategory);
			addColorCode('12小时降水预报',colorCode,cCNTwelve);
		var ajaxUrl='http://10.135.30.116:8080/ZJDataCenter/api/'+productcategory.nav+'/getContourEleValidtimeListByTime'
				+'?userid=zjwlzx&pwd=123&productcategory='+productcategory.type+'&fcstlevel=0'
				+'&time='+time+'&timetype='+productcategory.timetype+'&'
				+'admincodes=330000&elements=time,hours&limitcnt=100&dataformat=json';
			$.ajax({
					url:ajaxUrl,
					type:"get",
				success:function(data){

          if(data.returnCode==0){
          	num = 0
						$(".warning").addClass("displayNone")
						drawAxisThree(parseInt(hour),12,day,20,8,data.DS);
						removeAxis(productcategory)
					}else{
            num  = num+12

            if(num<100)
              twelveRain(setHour(num))
            else{
              $(".warning").removeClass("displayNone")
              num = 0
            }


					}

				}
			})	
	}

	//24小时降雨函数
	function twentyFourRain(nowdate){
		var time =threeTime(nowdate);
		v.pubTimeDisplay.val(time);
		var hour=time.slice(11,13);
			time=time.replace(/\//g,"");
		var t1=(parseInt(hour)==20)?'12':"00";
		time=time.slice(0,8)+t1+'0000';
		var productcategory={
				title:"OCF",
				type:"pr24",
				urls:"10.135.30.116:8080",
				nav:"NAFP_FOR_FTM_OCF_ZJ",
				userid:"24小时降水预报",
				num:"24",
				timetype:"H",
				year:time,
				hour:"24"
			};
			grid_controller(productcategory);

			addColorCode('24小时降水预报',colorCode,cCTwentyfour);
				var ajaxUrl='http://10.135.30.116:8080/ZJDataCenter/api/'+productcategory.nav+'/getContourEleValidtimeListByTime'
				+'?userid=zjwlzx&pwd=123&productcategory='+productcategory.type+'&fcstlevel=0'
				+'&time='+time+'&timetype='+productcategory.timetype+'&'
				+'admincodes=330000&elements=time,hours&limitcnt=100&dataformat=json';
			$.ajax({
					url:ajaxUrl,
					type:"get",
				success:function(data){
					if(data.DS.join("")){
						num = 0
						$(".warning").addClass("displayNone");
						drawAxistwentyFour(data.DS);
						removeAxis(productcategory)
					}else{
            num  = num+24

            if(num<100)
              twentyFourRain(setHour(num))
            else{
              $(".warning").removeClass("displayNone")
              num = 0
            }


					}

				}
			})				
	}





	// 增加色标
	function addColorCode(title,colorCode,cc){
		var html=' <p>'+title+'</p><ul>'
		for(var i=0;i<colorCode.length;i++){
			html+='<li>'+
                            '<span  style="background:'+colorCode[i]+'"></span>'+
                            '<span>'+cc[i]+'</span>'+
                    '</li>'
		}
		html+="</ul>";
		v.colorCode.html(html)
	}

	//时间切换函数
	function removeAxis(productcategory){
		var index=0;
		v.changeTime.unbind();
		v.changeTime.on("click","button",function(e){
			e.preventDefault();
			var len=$(".changeTime ul li");
			if($(this).hasClass("changeNext")){
				$(this).siblings("button").prop("disabled",false);
				len.eq(index).addClass("displayNone").removeClass("displayBlock");
				len.eq(++index).addClass("active").siblings(".active").removeClass("active");
				productcategory.year=len.eq(index).attr('year');
				productcategory.hour=len.eq(index).attr("hour");
				grid_controller(productcategory);
				if(len.length-index<=8){$(this).prop("disabled",true)}
			}else{
				--index;
				$(this).siblings("button").prop("disabled",false);
				len.eq(index)
				len.eq(index).removeClass("displayNone").addClass("displayBlock").addClass("active").siblings(".active").removeClass("active")
				productcategory.year=len.eq(index).attr('year');
				productcategory.hour=len.eq(index).attr("hour");
				grid_controller(productcategory);
				if(index==0){
					$(this).prop("disabled",true);
				}
			}
		})

		v.changeTime.on("mouseenter","li",function(){
			$(this).addClass("active").siblings(".active").removeClass("active");
			productcategory.year=$(this).attr('year');
			productcategory.hour=$(this).attr("hour");
			grid_controller(productcategory);

		});

	}

	//绘制1小时底部时间轴
	function drawAxisOne(initTime,step,data){
		var html="";
		var j=1;
		var date=new Date();
		for(var i=0;i<data.length;i++){
			var time=initTime+j*step;
			j++;
			html+='<li hour="'+data[i].hours+'" year="'+data[i].time+'">'+
			'<span class="upRect"></span>'+
			'<span>'+(time>23?"00":time)+':00</span>';
			if(time>23){
				initTime=1;
				j=0;
				date.setDate(date.getDate()+1)
				html+='<i ></i>'+
				'<b class="changeDay">'+(date.getMonth()+1)+'/'+date.getDate()+'</b>'
			}
			html+='</li>'
		}
		v.timeAjax.html(html);
	}
	//绘制3小时底部时间轴
	function drawAxisThree(initTime,step,day,endT,num,data){
		console.log(endT)
		var html="";
		var j=1;
		var date=new Date();
			date.setDate(day);	
		for(var i=0;i<data.length;i++){
			var time=initTime+j*step;
			j++;
			html+='<li hour="'+data[i].hours+'" year="'+data[i].time+'">'+
			'<span class="upRect"></span>'+
			'<span>'+(time>23?num:time)+':00</span>'
			if(time>23){
				initTime=endT;
				j=0;
				date.setDate(date.getDate()+1)
				html+='<i ></i>'+
				'<b class="changeDay">'+(date.getMonth()+1)+'/'+date.getDate()+'</b>'
			}
			html+='</li>'
		}
		v.timeAjax.html(html)
	}
	//绘制6小时底部时间轴
	function drawAxisSix(initTime,step,day,endT,num,data){
		console.log(endT)
		var html="";
		var j=1;
		var time
		var date=new Date();
			date.setDate(day);	
		for(var i=0;i<data.length;i++){
			time=initTime+j*step;
			if(data[i].hours%6==0){
				j++
				html+='<li hour="'+data[i].hours+'" year="'+data[i].time+'">'+
					'<span class="upRect"></span>'+
					'<span>'+(time>23?num:time)+':00</span>'
				if(time>23){
					initTime=endT;
					j=0;
					date.setDate(date.getDate()+1)
					html+='<i ></i>'+
						'<b class="changeDay">'+(date.getMonth()+1)+'/'+date.getDate()+'</b>'
				}
				html+='</li>'
			}
			
		}
		v.timeAjax.html(html)
	}
	//绘制24小时底部时间轴
	function drawAxistwentyFour(data){
		var date=new Date();	
		for(var i=0,html="";i<data.length;i++){
			if(data[i].hours%24==0){
				date.setDate(date.getDate()+1)
				html+='<li hour="'+data[i].hours+'" year="'+data[i].time+'">'+
					'<span class="upRect"></span>'+
					'<span>'+date.getDate()+'日</span>'
				if(date.getDate()==1){
					date.setDate(date.getDate()+1)
				html+='<i ></i>'+
					'<b class="changeDay">'+(date.getMonth()+1)+'月</b>'
				}
				html+='</li>'
			}
		}
		v.timeAjax.html(html)
	}


	//1小时降雨发布函数
	function oneTime(){
		var date=new Date();
		var day=date.getDate();
		var month=date.getMonth()+1;
		var hour=date.getHours()-1;
			hour=hour>9?hour:'0'+hour;
			month=month>9?month:'0'+month;
			day=day>9?day:'0'+day;
			return date.getFullYear()+'/'+month+'/'+day+' '+hour+":00"
	}
    //3小时降雨发布函数
    function threeTime(d){

        var date= d||new Date()
        var Mouth = date.getMonth()>=9?date.getMonth()+1:"0"+(date.getMonth()+1);
        var Day = date.getDate()>9?date.getDate():"0"+date.getDate();
        var hour=date.getHours();
        if(parseInt(hour)<10){
            date.setDate(date.getDate()-1);
            hour="08";
        }else if(parseInt(hour)>=10&&parseInt(hour)<14){
            date.setDate(date.getDate()-1);
            hour="20";
        }else{
            hour="08";
        }
        return date.getFullYear()+"/"+Mouth+"/"+Day+"/"+hour+":00";
    }


	//加载暴雨控件
	function grid_controller(productcategory){
    QXMap.removeVectorMapProduct(false);

		var mapProductOptions = {
	        productcategory: productcategory.type, 
	        time: productcategory.year,
	        regioncode: '330000',
	        method: productcategory.nav,
	        interface: 'getContourEleByTimeAndRegionCode',
	        key: 'zjwlzx',
	        pwd: '123',
	        level: 0,
	        validtime: productcategory.hour,
	        gridmethod: productcategory.nav,
	        gridinterface: 'getGridForecastEleGridInRectByTimeAndLevelAndValidtime',
	        nlat: 55,
	        slat: 18,
	        wlon: 116,
	        elon: 132,
	        isshowzero: false,
	        isshowcontrol: true,
	        position: "topright",
	        isforecast:true
	   	};
	    var product = QXMap.addVectorMapProduct(mapProductOptions, function (data) {
	    	if (data == null) return;
	    });
	    map.setZoom(10);
	    map.setCenter({lng:120.570,lat:30.126});

	}

	v.console.find("ul").on("click","li",function(){

		var val=$(this).children("input").prop("checked",true).val();
		if(val==="oneHour")oneRain();
		else if(val==="threeHour")threeRain();
		else if(val==="sixHour")sixRain();
		else if(val==="twelveHour")twelveRain();
		else if(val==="twentyfourHour")twentyFourRain();
	})
})
